<template>
  <!-- 商品详情页 -->
  <!-- <transition name="move"> -->
  <div v-show="showFlag" class="food" ref="food">
    <div class="food-content">
      <div class="image-header">
        <img :src="food.image" alt>
        <div class="back" @click="hidden">
          <i class="iconfont icon-fanhui"></i>
        </div>
      </div>
      <div class="content">
        <h1 class="title">{{food.name}}</h1>
        <div class="detail">
          <span class="sell-count">月售{{food.sellCount}}份</span>
          <span class="rating">好评率{{food.rating}}</span>
        </div>
        <div class="price">
          <span class="now">¥{{food.price}}</span>
          <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
        </div>
        <div class="cartcontrol-wrapper">
          <cartcontrot :food="food"></cartcontrot>
        </div>
        <div
          @click.stop.prevent="addFirst(food,$event)"
          class="buy"
          v-show="!food.count || food.count===0"
        >加入购物车</div>
      </div>
      <!-- 商品介绍 -->
      <split :food="food"></split>

      <!-- 商品评价tab -->
      <div class="rating-top">
        <h1 class="title">商品评价</h1>
        <rating
          :select-type="selectType"
          :only-content="onlyContent"
          :desc="desc"
          :ratings="food.ratings"
          @sen="sendSelect"
          @li="sendonlyindex"
        ></rating>
      </div>

      <!-- 评价列表 -->
      <div class="rating-wrapper">
        <ul v-show="food.ratings && food.ratings.length">
          <li v-for="(rating,index) in food.ratings"
            :key="index"
            v-show="needShow(rating.rateType,rating.text)"
          >
            <div class="uesr">
              <span class="name">{{rating.username}}</span>
              <img :src="rating.avatar" alt class="avatar" width="12" height="12">
            </div>
            <div class="time">{{rating.rateTime | formateDates}}</div>
            <p class="text">
              <span
                class="iconfont"
                :class="{'icon-haoping':rating.rateType===0,'icon-ai46':rating.rateType===1}"
              ></span>
              <span>{{rating.text}}</span>
            </p>
          </li>
        </ul>
        <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
      </div>
    </div>
  </div>
  <!-- </transition> -->
</template>

<script>
import BScroll from "better-scroll";
import Vue from "vue";
import cartcontrot from "../cartcontrot/cartcontrot";
import split from "../split/split";
import rating from "../rating/rating";
import { formatDate } from "../../../public/js/date.js";

const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;

export default {
  components: {
    cartcontrot,
    split,
    rating
  },
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      showFlag: false,
      selectType: ALL,
      onlyContent: false,
      desc: {
        all: "全部",
        positive: "推荐",
        negative: "吐槽"
      }
    };
  },
  //时间戳
  filters: {
    formateDates(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  methods: {
    //显示隐藏页面
    show() {
      this.showFlag = true;

      this.selectType = ALL; //显示时评论列表默认是全部
      this.onlyContent = false; //默认对号按钮灰色
      //初始化BScroll
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.food, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      });
    },

    //返回
    hidden() {
      this.showFlag = false;
    },

    //加入购物车
    addFirst(food, event) {
      if (!event._constructed) {
        return;
      }
      Vue.set(this.food, "count", 1);
    },

    //tab切换
    sendSelect(data) {
      if (data == 0) {
        this.selectType = POSITIVE;
      } else if (data == 1) {
        this.selectType = NEGATIVE;
      } else if (data == 2) {
        this.selectType = ALL;
      }
      this.selectType = data;
      this.$nextTick(() => {
        this.scroll.refresh();
      });
    },

    //对号选择
    sendonlyindex(data) {
      this.onlyContent = data;
      this.$nextTick(() => {
        this.scroll.refresh();
      });
    },

    //是否显示评论,为空不显示
    needShow(type, text) {
      if (this.onlyContent && !text) {
        return false;
      }
      if (this.selectType === ALL) {
        return true;
      } else {
        return type === this.selectType;
      }
    }
  }
};
</script>

<style lang = "scss">
.food {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 48px;
  z-index: 30;
  width: 100%;
  background: #f3f5f7;
  .image-header {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .back {
      position: absolute;
      top: 10px;
      left: 0px;
      i {
        font-size: 20px;
        display: block;
        padding: 10px;
        font-size: 20px;
        color: #fff;
        font-family: "微软雅黑";
      }
    }
  }
  .content {
    position: relative;
    background: #fff;
    padding: 18px;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    .title {
      font-size: 14px;
      font-weight: 700;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-bottom: 8px;
    }
    .detail {
      margin-bottom: 18px;
      font-size: 10px;
      color: rgb(147, 153, 159);
      line-height: 10px;
      .sell-count {
        margin-right: 12px;
      }
    }
    .price {
      .now {
        font-size: 14px;
        font-weight: 700;
        color: rgb(240, 20, 20);
        line-height: 24px;
        margin-right: 12px;
      }
      .old {
        font-size: 10px;
        font-weight: 700;
        color: rgb(147, 153, 159);
        line-height: 24px;
        text-decoration: line-through;
      }
    }
  }
  .cartcontrol-wrapper {
    position: absolute;
    right: 12px;
    bottom: 12px;
  }
  .buy {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 10;
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 10px;
    color: #fff;
    background: rgb(0, 160, 220);
  }
  .rating-top {
    margin-top: 16px;
    padding-top: 18px;
    background: #fff;
    border-top: 1px solid rgba(7, 17, 27, 0.1);

    .title {
      font-size: 14px;
      font-weight: 700;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-left: 18px;
    }
  }
  .rating-wrapper {
    padding: 0 18px;
    background: #fff;
    li {
      padding: 18px 0;
      position: relative;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      .uesr {
        position: absolute;
        right: 0;
        top: 16px;
        font-size: 0;
        line-height: 12px;
        .name {
          display: inline-block;
          vertical-align: top;
          font-size: 10px;
          color: rgb(147, 153, 159);
          margin-right: 6px;
        }
        .avatar {
          display: inline-block;
          vertical-align: top;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .time {
        margin-bottom: 6px;
        line-height: 12px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }
      .text {
        line-height: 16px;
        font-size: 12px;
        color: rgb(7, 17, 27);
        .icon-haoping {
          color: rgb(0, 160, 220);
          margin-right: 4px;
          line-height: 24px;
          font-size: 15px;
        }
        .icon-ai46 {
          color: rgb(147, 153, 159);
          margin-right: 4px;
          line-height: 24px;
          font-size: 15px;
        }
      }
    }
    .no-rating {
      padding: 16px 0;
      font-size: 12px;
      color: rgb(147, 153, 159);
    }
  }
}
/* .move-enter-active,.move-leave-active{
    transition: all 5s linear;
    transform: translate3d(0,0,0);
}
.move-enter{
    transform: translate3d(0,0,0)
}
.move-enter-to{
    transform: translate3d(-100%,0,0)
} */
</style>
